<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的隐藏与显示</title>
    <style>
    /*
    none:将元素隐藏起来,隐藏起来的元素会从页面消失,不会占用页面空间

    block:将元素以块级元素的方式显示出来
    在使用显示效果的时候,可能会改变元素本身特性

    inline:将元素以行级元素的方式显示出来
    inline无法设置宽度与高度
    inline-block:将元素以行级元素的方式显示出来
    可以设置宽度与高度

    */
    ul{
    display: none;
    }
    div{
    width: 100px;
    height: 100px;
    background: red;
    /*display: inline;*/
    display: inline-block;
    }
    span{
    width: 100px;
    height: 100px;
    background: green;
    display: block;
    }
    </style>
</head>
<body>
<div>这是一个div</div>
<ul>
    <li>选项</li>
    <li>选项</li>
    <li>选项</li>
</ul>
<div>这是一个div</div>
<hr>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<hr>
<span>这是一个span</span>
<span>这是一个span</span>
<span>这是一个span</span>
</body>
</html>